<template>
  <div class="retrieve-record">
    <el-table
      :data="listData"
      cell-class-name="custom-row"
      header-row-class-name="custom-row"
      header-cell-class-name="custom-header"
      :empty-text="loading ? '数据加载中' : '暂无数据'"
    >
      <el-table-column
        label="饰品"
        prop="item_name"
        min-width="100"
      ></el-table-column>

      <el-table-column label="价格" align="center" prop="price">
        <template v-slot="scope">
          <div class="d-flex align-center justify-center">
            <img src="@/static/img/icon/diamonds.png" class="mr-1" />
            {{ scope.row.price }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template v-slot="scope">
          <div v-if="scope.row.auth == 0">未审核</div>
          <div v-if="scope.row.auth == 1">{{getStatusStr(scope.row.status)}}</div>
          <div v-if="scope.row.auth == 2">审核不通过</div>
        </template>
      </el-table-column>
      <el-table-column label="审核备注" align="center" prop="auth_remark">
      </el-table-column>
      <el-table-column label="取回时间" align="center" prop="trade_time">
        <template v-slot="scope">
          {{ $dayjs.unix(scope.row.trade_time).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
    </el-table>

    <v-spacer></v-spacer>

    <div class="pagination-wrapper mt-3 pb-3">
      <el-pagination
        v-model:page-size="query.page_size"
        :total="total"
        v-model:current-page="query.page"
        @current-change="fetch"
        hide-on-single-page
      ></el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { UserService } from "@/services/UserService";
import { UserRetrievRecord } from "@/types";
import { defineComponent, reactive, ref } from "vue";

export default defineComponent({
  setup() {
    const listData: UserRetrievRecord[] = [];
    return {
      query: reactive({
        page: 1,
        page_size: 10,
        status: -1,
        auto_delivery: -1,
        auth:-1
      }),
      listData: ref(listData),
      total: ref(0),
      loading: ref(false),
    };
  },

  methods: {
    fetch() {
      if (this.loading) return;
      this.loading = true;
      return UserService.getRetrieveRecords(this.query)
        .then((res) => {
          const { list, total } = res.data.data;
          this.listData = list;
          this.total = total;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    getStatusStr(status: number) {
      if (status === 0) {
        return "待取回";
      }
      if (status === 1) {
        return "已取回";
      }
      if (status === 2) {
        return "取消订单";
      }
    },
  },

  created() {
    this.fetch();
  },
});
</script>

<style lang="scss">
.retrieve-record {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  height: 100%;

  > * {
    flex: none;
  }

  .pagination-wrapper {
    text-align: center;
  }
}
</style>
